<template>
  <div>
    <img v-if="Object.keys(info).length===0"
         src="../assets/loading.gif" width="180">
    <div v-else>
      <strong>编号:{{info.id}}</strong> <br>
      <strong>标题:{{info.msg}}</strong> <br>
      <strong>内容:{{info.content}}</strong>
    </div>
  </div>
</template>

<script>
  const newInfo = [
    {id:0,msg:"东三省限电",content:"迪迦走了 带走了光"},
    {id:1,msg: "周冬雨过生日",content:"尚硅谷知名老师......"},
    {id:2,msg: "尚硅谷上市了",content: "尚硅谷每个老师分了100w"},
  ]
  export default {
    name: "messageDetail",
    props:["id"],
    data(){
      return {info:{}}
    },
    watch:{
      id:{
        handler(){
          //清空info
          this.info = {}
          //根据id去获取新闻的详细信息
          setTimeout(()=>{
            let id = +this.id;
            this.info = newInfo.filter(info=>info.id === id)[0];
          },4000)
        },
        immediate:true
      }
    }
  }
</script>

<style scoped>

</style>